<template>
  <div class="mark-container">
    <!-- 列表查询 -->
    <a-card class="mark-container-search" v-role="'A010101002'">
      <div class="mark-container-search-content">
        <a-form :model="searchForm" ref="searchRefForm">
          <a-row :gutter="24" justify="start" :style="{ marginLeft: 0, marginRight: 0 }">
            <a-col :span="4" :style="{ paddingLeft: 0, paddingRight: 0 }">
              <a-form-item field="department" label-col-flex="0px">
                <a-select
                  v-model="searchForm.department"
                  placeholder="科室"
                  allow-clear
                  :style="{ width: '272px', height: '32px' }"
                >
                  <a-option
                    v-for="item in departmentList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4" :style="{ paddingLeft: 0, paddingRight: 0 }">
              <a-form-item field="keyword" label-col-flex="0px">
                <a-input-search
                  v-model="searchForm.keyword"
                  placeholder="输入任务ID/名称/创建人"
                  :style="{ width: '272px', height: '32px' }"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="4" :style="{ paddingLeft: 0, paddingRight: 0 }">
              <a-form-item field="status" label-col-flex="0px">
                <a-select
                  v-model="searchForm.status"
                  placeholder="任务状态"
                  allow-clear
                  :style="{ width: '272px', height: '32px' }"
                >
                  <a-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.name"
                    :value="Number(item.value)"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4" :style="{ paddingLeft: 0, paddingRight: 0 }">
              <a-form-item field="uses" label-col-flex="0px">
                <a-select
                  v-model="searchForm.uses"
                  placeholder="任务用途"
                  allow-clear
                  :style="{ width: '272px', height: '32px' }"
                >
                  <a-option
                    v-for="item in taskUseList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4" :style="{ paddingLeft: 0, paddingRight: 0 }">
              <a-form-item field="companyId" label-col-flex="0px">
                <a-select
                  v-model="searchForm.companyId"
                  placeholder="标注单位"
                  allow-clear
                  allow-search
                  :style="{ width: '272px', height: '32px' }"
                >
                  <a-option
                    v-for="item in sicknessList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4" :style="{ paddingLeft: 0, paddingRight: 0 }">
              <a-form-item field="label" label-col-flex="0px">
                <a-select
                  v-model="searchForm.label"
                  placeholder="标注标签"
                  allow-clear
                  :style="{ width: '272px', height: '32px' }"
                >
                  <a-option
                    v-for="item in taskLabelList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4" :style="{ paddingLeft: 0, paddingRight: 0 }">
              <a-form-item field="target" label-col-flex="0px">
                <a-select
                  v-model="searchForm.target"
                  placeholder="标注目标"
                  allow-clear
                  :style="{ width: '272px', height: '32px' }"
                >
                  <a-option
                    v-for="item in taskTargetList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4" :style="{ paddingLeft: 0, paddingRight: 0 }">
              <a-form-item field="annoUserId" label-col-flex="0px">
                <a-select
                  v-model="searchForm.annoUserId"
                  placeholder="医生姓名"
                  allow-clear
                  allow-search
                  :style="{ width: '272px', height: '32px' }"
                >
                  <a-option
                    v-for="item in doctorList"
                    :key="item.id"
                    :label="item.userName"
                    :value="item.id"
                  >
                  </a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4" :style="{ paddingLeft: 0, paddingRight: 0 }">
              <a-form-item field="beginDate" label-col-flex="0px">
                <a-date-picker
                  v-model="searchForm.beginDate"
                  style="width: 272px; height: 32px"
                  allow-clear
                  placeholder="起始时间"
                  :disabledDate="(d: string | number | Date | dayjs.Dayjs | null | undefined) => dayjs(d).isAfter(dayjs(searchForm.endDate))"
                >
                  <template #suffix-icon>
                    <i class="iconfont icon-riliriqi"></i>
                  </template>
                </a-date-picker>
              </a-form-item>
            </a-col>
            <a-col :span="4" :style="{ paddingLeft: 0, paddingRight: 0 }">
              <a-form-item field="endDate" label-col-flex="0px">
                <a-date-picker
                  v-model="searchForm.endDate"
                  style="width: 272px; height: 32px"
                  allow-clear
                  placeholder="结束时间"
                  :disabledDate="(d: string | number | Date | dayjs.Dayjs | null | undefined) => dayjs(d).isBefore(dayjs(searchForm.beginDate))"
                >
                  <template #suffix-icon>
                    <i class="iconfont icon-riliriqi"></i>
                  </template>
                </a-date-picker>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="mark-container-search-btn">
        <a-button :style="{ marginRight: '16px' }" @click="reset">重 置</a-button>
        <a-button type="primary" @click="search">查 询</a-button>
      </div>
    </a-card>
    <!-- 列表 -->
    <a-card class="mark-container-table">
      <div class="mark-container-table-header">
        <div class="header-title">任务列表</div>
        <div>
          <a-button
            v-role="'A010101003'"
            type="primary"
            @click="handeleTaskUserClick"
            style="margin-right: 10px"
          >
            <template #icon>
              <icon-plus />
            </template>
            <template #default>新建</template>
          </a-button>
          <!-- <a-button type="primary" @click="handleReadPathology">病理阅片</a-button> -->
        </div>
      </div>
      <!-- 任务列表 -->
      <div class="task-table" v-role="'A010101001'">
        <Table
          :columns="columns"
          :data="data"
          :total="total"
          :current="searchForm.page"
          :pageSize="searchForm.pageSize"
          :stickyHeader="true"
          :showPageSize="true"
          :scroll="scroll"
          :scrollbar="true"
          :table-layout-fixed="true"
          @handle-size-change="handleSizeChange"
          @handle-current-size-change="handlePageSizeChange"
        >
          <!-- 表头处理 -->
          <template #summation>
            <span class="new-title">序列总量</span>
            <span class="new-title tip">(批量数*交叉次数)</span>
          </template>
          <template #submitedSeriesCount>
            <span class="new-title">已提交序列数量</span>
            <span class="new-title tip">(含交叉次数)</span>
          </template>
          <!-- 数据单元格处理 -->
          <!-- 标注单位 -->
          <template #companyList="{ record }">
            <span>{{ record.companyList ? record?.companyList[0]?.name : "-" }}</span>
          </template>
          <!-- 任务标签 -->
          <template #label="{ record, column }">
            <span>{{ getTableTextValue(record, taskLabelList, column?.dataIndex) }}</span>
          </template>
          <!-- 序列总量 -->
          <template #summationData="{ record }">
            <span v-if="record?.assignMethod !== 2">{{ record?.seriesCount }}</span>
            <span v-if="record?.assignMethod === 2"
              >{{ record?.seriesCount }} * {{ record?.crossNum }}</span
            >
          </template>
          <!-- 任务目标 -->
          <template #target="{ record, column }">
            <span>{{
              getTableTextValue(record, taskTargetList, column?.dataIndex)
            }}</span>
          </template>
          <!-- 任务用途 -->
          <template #uses="{ record, column }">
            <span>{{ getTableTextValue(record, taskUseList, column?.dataIndex) }}</span>
          </template>
          <!-- 任务方式 -->
          <template #pubMethod="{ record }">
            <span>{{ PubMethodEnum[record?.pubMethod] }}</span>
          </template>
          <!-- 开始时间 -->
          <template #beginDate="{ record, column }">
            <span>{{ getTableDateValue(record, column?.dataIndex) }}</span>
          </template>
          <!-- 结束时间 -->
          <template #endDate="{ record, column }">
            <span>{{ getTableDateValue(record, column?.dataIndex) }}</span>
          </template>
          <!-- 创建时间 -->
          <template #createTime="{ record, column }">
            <span>{{ getTableDateValue(record, column?.dataIndex) }}</span>
          </template>
          <!-- 状态 -->
          <template #status="{ record }">
            <span v-if="record.status === 0" style="color: #ff8800">未发布</span>
            <span v-if="record.status === 1" style="color: #0dab76">进行中</span>
            <span v-if="record.status === 2" style="color: #333333">已完成</span>
            <span v-if="record.status === 3" style="color: #999999">已终结</span>
          </template>
          <!-- 操作 -->
          <template #action="{ record }">
            <div>
              <a-button
                type="text"
                class="action-btn"
                @click="handleQueryDetail(record)"
                v-role="'A010101004'"
                >查看</a-button
              >
              <a-button
                type="text"
                class="action-btn"
                v-if="[0, 1].includes(record.status)"
                @click="handleUpdateDetail(record)"
                v-role="'A010101005'"
                >编辑</a-button
              >
              <a-button
                type="text"
                class="action-btn"
                v-if="[0].includes(record.status)"
                @click="handleChangeStatus(record)"
                v-role="'A010101006'"
                >发布</a-button
              >
              <a-button
                type="text"
                class="action-btn"
                v-if="[1].includes(record.status)"
                @click="handleChangeStatus(record)"
                v-role="'A010101007'"
                >终结</a-button
              >
              <a-dropdown @select="handleSelect($event, record)">
                <a-button type="text" class="action-btn">
                  <template #icon>
                    <icon-more />
                  </template>
                </a-button>
                <template #content>
                  <a-doption
                    value="query"
                    v-if="record.submitedSeriesCount !== 0"
                    v-role="'A010101010'"
                    >查看已提交序列</a-doption
                  >
                  <a-doption value="copy" v-role="'A010101008'">复制</a-doption>
                  <a-doption value="del" v-if="record.status === 0" v-role="'A010101009'"
                    >删除</a-doption
                  >
                </template>
              </a-dropdown>
            </div>
          </template>
        </Table>
      </div>
    </a-card>
    <!-- 发布项目提示窗 -->
    <Dialog
      :visible="changeStatusVisibile"
      :title="'提示'"
      :width="420"
      :isForm="true"
      :maskClosable="false"
      :okText="'确定'"
      @update:visible="handleSubmitClick"
    >
      <template v-slot>
        <div class="body-title">{{ bodyTitle }}</div>
        <div class="body-tip">{{ bodyTip }}</div>
      </template>
    </Dialog>
    <!-- 复制提示窗 -->
    <Dialog
      :visible="copyVisibile"
      :title="'提示'"
      :width="420"
      :isForm="true"
      :maskClosable="false"
      :okText="'确定'"
      @update:visible="handleCopyClick"
    >
      <template v-slot>
        <div class="body-title" style="margin-bottom: 0px">确认复制吗？</div>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import dayjs from "dayjs";
import Table from "@/components/table/index.vue";
import Dialog from "@/components/dialog/index.vue";
import useGetSelect from "./hooks/useGetSelect";
import useCompose from "./hooks/useCompose";
import useUtils from "./hooks/useUtils";
import * as Api from "@/api/project/project";
import type * as ApiType from "@/api/project/project.d";
// import router from 'vue-router';

const loading = ref(false);
// const options = ref<ApiType.TableListItem[]>([]);
const options = reactive({
  dataList: [] as ApiType.TableListItem[],
  total: 0,
});
const resData = ref<ApiType.TableListItem[]>([]);
const fieldNames = { value: "id", label: "name" };
// 获取下拉值(异步)
const {
  departmentList,
  statusList,
  taskUseList,
  sicknessList,
  taskLabelList,
  taskTargetList,
  doctorList,
  initSelectData,
} = useGetSelect();

// 查询及列表相关参数
const {
  searchForm,
  searchRefForm,
  search,
  reset,
  columns,
  data,
  dataTotal,
  scroll,
  bodyTitle,
  bodyTip,
  getTableData,
  handleSizeChange,
  handlePageSizeChange,
  handeleTaskUserClick,
  handleQueryDetail,
  handleUpdateDetail,
  changeStatusVisibile,
  handleChangeStatus,
  handleSubmitClick,
  copyVisibile,
  handleCopyClick,
  handleSelect,
  total,
} = useCompose();

// 值转换工具函数
const { PubMethodEnum, getTableTextValue, getTableDateValue } = useUtils();

const handleSearch = async (value: string) => {
  const params = {
    page: 1,
    pageSize: 10000000,
    keyword: "",
  };
  console.log(value, "value");
  if (value) {
    loading.value = true;
    params.keyword = value;
    const res = await Api.getTableData(params);
    console.log(res, "dadasdasd");
    if (res.code === 200) {
      resData.value = res.data.list;
      options.total = res.data.list.length;
      getPageData(1);
      loading.value = false;
    }
  } else {
    options.dataList = [];
    options.total = 0;
  }
};

const getPageData = (page: number) => {
  options.dataList = resData.value.filter(
    (item, index) => index >= (page - 1) * 10 && index < page * 10
  );
};

const handleAllChange = (value: boolean | (string | number | boolean)[]) => {
  if (value) {
    searchForm.ids = resData.value.map((item) => item.id);
  } else {
    searchForm.ids = [];
  }
};

const handleSearchPageSizeChange = (page: number) => {
  // selectAll.value = false;
  getPageData(page);
};

const handleSearchChange = (
  value: string | number | Record<string, any> | (string | number | Record<string, any>)[]
) => {
  console.log(value, "搜索框改变");
  if (Array.isArray(value)) {
    searchForm.ids = value;
  }
};

onMounted(() => [initSelectData(), getTableData()]);

const handleReadPathology = () => {
  // window.open('http://localhost:5173/readPathology')
  window.open(
    `${window.location.origin}#/bigPicture?id=35&type=create&token=52f85c31cbbe426582e8d6191baabe10_5291&userId=5088&taskId=4822`
  );
};
</script>
<style lang="less" scoped>
.mark-container {
  padding: 16px;
  // height: 100%;
  height: calc(100vh - 56px);
  &-search {
    padding: 20px;
    margin-bottom: 16px;
    background-color: #fff;
    border-radius: 2px;
    :deep(.arco-card-body) {
      padding: 0;
      .arco-col {
        // margin-right: 20px;
        margin-right: 3%;
        .arco-form-item-label-col {
          display: none;
        }
      }
    }
    &-btn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
  &-table {
    padding: 20px;
    // margin-bottom: 16px;
    background-color: #fff;
    border-radius: 2px;
    height: calc(100% - 192px);
    :deep(.arco-card-body) {
      padding: 0;
      height: 100%;
    }
    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .header-title {
        font-weight: 700;
        font-size: 16px;
        color: #333;
      }
    }
    .action-btn {
      padding: 0 8px;
      border-right: 1px solid #e8e8e8;
      height: 18px;
      // padding-right: 16px;
    }
    .action-btn:nth-of-type(1) {
      padding-left: 0;
    }
    .action-btn:nth-of-type(4) {
      padding-right: 0;
      border-right: 0;
      vertical-align: -2px;
    }
  }
  .task-table {
    width: 100%;
    height: calc(100% - 50px);
    .table-container {
      height: 100%;
      :deep(.arco-table) {
        height: calc(100% - 46px);
      }
    }
  }
}
.new-title {
  display: block;
  line-height: 18px;
}
.tip {
  font-weight: 400;
  font-size: 12px;
  color: #999;
}
.search-select {
  :deep(.arco-select-view-multiple) {
    background-color: #fff;
    border-color: #d9d9d9;
  }
  :deep(.arco-select-view-multiple:hover) {
    border-color: #448e97;
  }
}
</style>
<style lang="less">
.body-title {
  font-weight: 700;
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}
.body-tip {
  font-weight: 400;
  font-size: 14px;
  color: #888;
  text-align: center;
}
</style>
